import { formProps, type FormItemProps } from 'element-plus';
import { type PropType, type ExtractPropTypes } from 'vue';
import { type ColConfig } from '@/components/ResponsiveRow';

export type GetKeys<T extends object> = {
  [K in keyof T & string]: T[K] extends Array<infer I>
    ? `${K}` | (I extends object ? `${K}[${number}].${GetKeys<I>}` : `${K}[${number}]`)
    : T[K] extends object
      ? `${K}.${GetKeys<T[K]>}`
      : `${K}`;
}[keyof T & string];

type IFormItem = Partial<Omit<FormItemProps, 'prop'>>;

export type ProFormConfigItem<T extends object> = IFormItem & {
  prop: GetKeys<Required<T>> | (string & {});
  render?: (row: T) => JSX.Element;
  renderLabel?: (row: { label: string }) => JSX.Element | string;
  renderError?: (row: { key: number; error: string }) => JSX.Element;
  /** 布局配置 */
  col?: ColConfig;
  /** 插槽名称 */
  slotName?: string;
  /** 是否隐藏 */
  isHidden?: boolean;
};

export const proFormProps = Object.assign({}, formProps, {
  col: {
    type: Object as PropType<ColConfig>,
    default: () => ({}),
  },
  config: {
    type: Array as PropType<Array<ProFormConfigItem<any>>>,
    required: true,
  },
} as const);

export type ProFormProps = ExtractPropTypes<typeof proFormProps>;
